✅ Checklist

• 🧪 The component is unit tested
• 🧪 The component includes E2E tests
• 🗑️ Old Cypress tests exclusive to the component are removed
• 📖 The component is documented in storybook with an .mdx file
• ♿ The component complies with the Web Content Accessibility Guidelines.
• 🌐 All strings intended for humans or assistive technology must be localized with i18n.
• 📦 The Lit component is exported in the appropriate index.ts and lazy-index.ts files.
• 🎨 CSS parts are documented still accessible.
• 🦥 Slotted Content, public methods and properties are documented
• 🔄 The component outputs the same Angular output as before with Stencil
• 🏷️ The component declares the component type in the HTMLElementTagNameMap

https://coveord.atlassian.net/browse/KIT-5321

Description

Migrates atomic-timeframe from Stencil to Lit as part of the framework modernization effort. This is a light DOM data container component with no rendering logic or controller integration.

Changes Made

Component Migration

• Converted to Lit using LightDomMixin(LitElement) with @property decorators
• Implements Timeframe interface and LitElementWithError
• Properties: period, unit, amount, label (all reflected to attributes)
• Validation: Added Bueno schema validation (private static readonly) with ValidatePropsController
• Error Handling: Added error state property and validation that logs to console only
• Original Stencil file deleted: Removed atomic-timeframe.tsx

Testing

• Comprehensive unit tests (17 active tests + 4 skipped for v4)
• Validation tests: Using it.each and it.skip.each patterns from atomic-result-list.spec.ts
• Tests validation warnings: Verifies console warnings are logged for invalid prop values
• Tests all valid units: minute, hour, day, week, month, quarter, year
• Attribute reflection tests: Verifies all properties reflect to attributes
• Flattened describe blocks: Following tests-atomic.instructions.md conventions
• Simplified test patterns: Tests create elements with desired props directly following established codebase patterns

Documentation

• MDX documentation with usage examples (basic timeframes, custom amounts, future timeframes)
• Improved JSDoc comments: Clearer, more concise descriptions throughout
• Storybook stories with MSW mocking: Updated stories to use MockSearchApi for network call mocking
  • Added multiple story variants (WithPastPeriod, WithNextPeriod, MultipleTimeframes)
  • Moved decorator to meta-level for consistency
  • Follows pattern from atomic-sort-expression.new.stories.tsx

Exports

• Updated index.ts and lazy-index.ts for Lit component loading

Usage

<atomic-timeframe-facet field="date">
  <atomic-timeframe unit="day" amount="7" label="Last week"></atomic-timeframe>
  <atomic-timeframe unit="month" amount="3" label="Last quarter"></atomic-timeframe>
  <atomic-timeframe period="next" unit="week" label="Next week"></atomic-timeframe>
</atomic-timeframe-facet>

Notes

This component is a data container with no rendering logic or controller integration. E2E testing is handled through parent facet components (atomic-timeframe-facet, etc.). No component-specific Cypress tests exist for this component.

Custom agent used: StencilToLitMigrationV1
Specialized agent for migrating Atomic Stencil code to Lit (components, functional components, and utils)

• Fixes Migrate atomic-timeframe #6792

💬 We'd love your input! Share your thoughts on Copilot coding agent in our 2 minute survey.